<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org" lang="en">

<head th:replace="fragments/headTag :: headTag">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>BaseX Load Tool :: a beta tool with Spring and Thymeleaf</title>

<!-- Bootstrap -->
<link
	href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.css"
	th:href="@{/webjars/bootstrap/3.0.3/css/bootstrap.css}"
	rel="stylesheet" />
<link href="../../../resources/css/navbar.css"
	th:href="@{/resources/css/navbar.css}" rel="stylesheet" />
<!-- JQuery -->
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"
	th:src="@{/webjars/jquery/1.9.0/jquery.min.js}"></script>
<script
	src="http://netdna.bootstrapcdn.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"
	th:src="@{/webjars/bootstrap/3.0.3/js/bootstrap.min.js}"></script>

<!-- Spring JS and Ajax -->
<script type="text/javascript" th:src="@{/resources/dojo/dojo.js}"></script>
<script type="text/javascript" th:src="@{/resources/spring/Spring.js}"></script>
<script type="text/javascript"
	th:src="@{/resources/spring/Spring-Dojo.js}"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
	<div class="container">
		<div th:include="fragments/bodyHeader :: bodyHeader" th:remove="tag">This
			is the navigation bar here</div>
		<!-- Main component for a primary marketing message or call to action -->
		<div class="jumbotron">
			<h1 th:text="#{home.welcome}">Welcome!</h1>
			<p>
				<span th:text="#{home.banner}">Spreadsheet Builder
					Application</span>
				<!-- <a th:href="@{/test}"><span th:text="#{home.test}">Go
						Test</span></a> -->
			</p>
			<p th:text="#{intro.text1}">This application generates bespoke unpopulated spreadsheets
				that contain the metadata fields needed to generate Collections in
				the QuDEx Repository.</p> 
			<a id="load" class="btn btn-lg btn-primary"
				href="/swf-qudex-spreadsheet/metadata"
				th:href="@{/metadata}" th:text="#{home.button}">Start Spreadsheet
				creation</a>
		</div>
		<div class="modal js-loading-bar">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-body">
						<h4 th:text="#{metadata.progressTitle}">Loading Schemas</h4>
						<div class="progress progress-striped active">
							<div class="progress-bar progress-bar-info" th:role="progressbar"
								th:aria-valuenow="100" th:aria-valuemin="0" th:aria-valuemax="100"
								style="width: 100%;"></div>
						</div>
						<span id="pbtext" class="hide" th:text="#{metadata.pbMessage}">Loading metadata schemas...</span>
					</div>
				</div>
			</div>
		</div>
		<div id="footer" th:include="fragments/footer :: footer"></div>
	</div>
	<script>
		$(document).ready(function() {
			$('.js-loading-bar').modal({
				backdrop : 'static',
				show : false
			});

			$('#load').click(
				function() {
					var $modal = $('.js-loading-bar'), $bar = $modal
							.find('.progress-bar');
					$modal.modal('show');
					$bar.text($('#pbtext').text());
					$bar.addClass('animate');
			});
		});
	</script>
</body>
</html>